/******************************************************************************
* File description: MethodStage.qml
* Function: 扩增-阶段
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-09-04
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.14

Item {
    id: root

    /* property 定义开始 */
    // 阶段名
    property string stageName: ""
    // 当前阶段的最后一个步骤的滑动条y值
    property real lastStepYPos: 0
    // 步骤数据
    property var stepData: []
    // 私有
    // 阶段标头颜色映射
    property var _stageColorMapper: {"保温阶段": ["#79F2FF", "#7DC8FF"], "PCR阶段": ["#A0FF77", "#3CE550"]}

    // 信号
    // 滑动条变动
    signal sliderValueChanged(real sliderPosY, int curIndex)
    // 第一个步骤的左侧多边形变化
    signal firstStepPolygonLeftChanged(real lastStepYPos);

    // 函数

    /* property 定义结束 */

    implicitHeight: parent.height
    implicitWidth: 0

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        // 阶段标头
        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: 40

            // 背景
            Rectangle {
                anchors.fill: parent
                LinearGradient {
                    anchors.fill: parent
                    start: Qt.point(0, 0)
                    end: Qt.point(0, height)
                    gradient: Gradient {
                        GradientStop {position: 0.0; color: root._stageColorMapper[root.stageName][0]}
                        GradientStop {position: 1.0; color: root._stageColorMapper[root.stageName][1]}
                    }
                }
            }

            // 文字
            Label {
                anchors.fill: parent
                font.pixelSize: 22
                color: "#FF222222"
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: qsTr(root.stageName)
            }
        }

        // 按钮
        Item {
            Layout.fillWidth: true
            Layout.preferredHeight: 40

            RowLayout {
                anchors.fill: parent

                // 左侧阶段加
                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "#80FF0000"
                    border.width: 0
                }

                // 阶段删
                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "#800000FF"
                    border.width: 0
                }

                // 右侧阶段加
                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "#80FF0000"
                    border.width: 0
                }
            }
        }

        // 步骤
        Item {
            id: stepsContainer
            Layout.fillWidth: true
            Layout.fillHeight: true

            Row {
                id: stepRow
                anchors.fill: parent
                spacing: 18

                Repeater {
                    model: stepData

                    MethodStep {
                        id: step
                        height: parent.height

                        // 滑动条变化
                        onSliderHandleYPosChanged: {
                            root.sliderValueChanged(step.sliderHandleYPos, index)
                            // 最后一个步骤变化
                            if(index === root.stepData.length-1) {
                                root.lastStepYPos = step.sliderHandleYPos
                            }
                        }

                        Component.onCompleted: {
                            step.stepNum = String(index+1)
                            root.implicitWidth += step.implicitWidth
                            if(index !== 0) root.implicitWidth += stepRow.spacing
                        }

                        Connections {
                            target: root

                            // 监听滑动条变化
                            function onSliderValueChanged(sliderPosY, curIndex){
                                // 加一下标的步骤多边形左上角变化
                                if(index === curIndex+1){
                                    step.changePolyLeftPoint(sliderPosY)
                                }
                            }

                            // 第一个步骤的左侧多边形变化
                            function onFirstStepPolygonLeftChanged(lastStepYPos) {
                                if(index === 0) {
                                    step.changePolyLeftPoint(lastStepYPos);
                                }
                            }
                        }
                    }
                }
            }
        }

        // 循环数
        Rectangle {
            id: cyclingContainer
            Layout.fillWidth: true
            Layout.preferredHeight: 40
            color: "#FFFFFFFF"
            border.width: 0

            RowLayout {
                anchors.fill: parent
                spacing: 3
                visible: root.stageName === "PCR阶段"

                CustomHorSpacerItem {}

                Label {
                    font.pixelSize: 16
                    color: "#FF222222"
                    text: qsTr("循环次数: ")
                }

                BaseTextInput {
                    id: cyclingNum
                    Layout.preferredWidth: 40
                    Layout.preferredHeight: 25
                    inputLeftPadding: 5
                    inputRightPadding: 5
                    inputFontPixelSize: 16
                }

                Label {
                    font.pixelSize: 16
                    color: "#FF222222"
                    text: qsTr("x")
                }

                CustomHorSpacerItem {}
            }
        }
    }
}
